<template>
	<view class="my-userinfo-container">
		<!-- 头像昵称区域 -->
		<view class="top-box">
			<image :src="userinfo.userImg" class="avatar"></image>
			<view class="nickname" style="font-size: 20px;">{{userinfo.userName}}</view>
			<view class="myUn11" @click="Auth_rz()" style="" v-if="userinfo.userType==='新用户'">点击认证
			</view>
			<view class="myUn12" v-if="userinfo.userType==='新用户'">新用户 | 未认证</view>
			<view class="myUn12" v-else-if="userinfo.userType==='学生'">至诚学生 | 学号:{{ userinfo.userid }}</view>
			<view class="myUn12" v-else-if="userinfo.userType==='跑腿'">至诚跑腿 | 学号:{{ userinfo.userid }}
				<text class="myUn13">信用分:99.99</text>
			</view>
			<view class="myUn12" v-else-if="userinfo.userType==='商户'">至诚商户 | 编号:{{ userinfo.userid }}</view>
			<view class="myUn12" v-else-if="userinfo.userType==='学工'">学生工作处 | 工号:{{ userinfo.userid }}</view>
			<image class="myUn14"
				src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E4%B8%8B%E6%96%B9%E5%8A%9F%E8%83%BD%E5%8C%BA/%E7%AE%AD%E5%A4%B4%20%E5%8F%B3.png"
				mode="" @click="Userxx"></image>
		</view>
		<!-- 功能区1 -->
		<view class="myUn1">
			<view class="myUn2">
				<text class="myUn3">基本功能</text>
			</view>
			<view class="myUn4" v-for="(item,value) in Gongne" :key=value @click="GongneTo(item.id)"
				v-if="userinfo.userType==='新用户' || userinfo.userType==='学生'?item.id===1 || item.id===2 || item.id===5:item.id===1 || item.id===2 || item.id==3 ||item.id===4 || item.id===5">
				<image class="myUn5" :src="item.img"></image>
				<text class="myUn6">{{ item.name }}</text>
			</view>
		</view>
		<!-- 底下功能区2 -->
		<view  class="myUn7" v-for="(item,value) in BottonGongne" :key=value @click="BottonTo(item.id)"
			v-if="userinfo.userType==='新用户' || userinfo.userType==='学生'?item.id===1 || item.id===2 || item.id===4 || item.id===5:item.id===1 || item.id===2 || item.id==3 ||item.id===4 || item.id===5">
				<image class="myUn8" :src="item.img">
				</image>
				<text class="myUn9">{{ item.name }}</text>
				<image class="myUn10"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E4%B8%8B%E6%96%B9%E5%8A%9F%E8%83%BD%E5%8C%BA/%E7%AE%AD%E5%A4%B4%20%E5%8F%B3.png"
					mode=""></image>
			<button open-type="share" v-if="item.id===4" plain="true" style="border: 0;height: 50px;"></button>
			<button open-type="contact" v-if="item.id===5" plain="true" style="border: 0;height: 50px;"></button>
		</view>
		
	</view>
</template>

<script>
	// 按需导入 mapState 辅助函数
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('m_user', ['userinfo']),
		},
		data() {
			return {
				//功能区块的图片名称数组
				Gongne: [{
						id: 1,
						name: '我的动态',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E5%8A%A8%E6%80%81.png',
					},
					{
						id: 2,
						name: '应聘中心',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E4%BC%81%E4%B8%9A%E6%8B%9B%E8%81%98.png',
					},
					{
						id: 3,
						name: '接单中心',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E8%AE%A2%E5%8D%95.png',
					},
					{
						id: 4,
						name: '跑腿订单',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E6%88%91%E7%9A%84%E8%AE%A2%E5%8D%95%402x.png',
					},
					{
						id: 5,
						name: '我的订单',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E8%AE%A2%E5%8D%95%20%281%29.png',
					},

				],
				//下方功能区块
				BottonGongne: [{
						id: 1,
						name: '加入跑腿',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E4%B8%8B%E6%96%B9%E5%8A%9F%E8%83%BD%E5%8C%BA/%E6%B7%BB%E5%8A%A0%EF%BC%8C%E7%BB%84%E5%90%88%EF%BC%8C%E5%8A%A0%E5%85%A5.png',
					},
					{
						id: 2,
						name: '商家认证',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E4%B8%8B%E6%96%B9%E5%8A%9F%E8%83%BD%E5%8C%BA/%E8%AE%A4%E8%AF%81.png',
					},
					{
						id: 3,
						name: '我的钱包',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/Img钱包 (1).png?oss-cn-process=image/watmek',
					},
					{
						id: 4,
						name: '分享好友',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E4%B8%8B%E6%96%B9%E5%8A%9F%E8%83%BD%E5%8C%BA/%E5%88%86%E4%BA%AB.png',
					},
					{
						id: 5,
						name: '客服中心',
						img: 'https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E6%88%91%E7%9A%84%E7%95%8C%E9%9D%A2-My/%E4%B8%8B%E6%96%B9%E5%8A%9F%E8%83%BD%E5%8C%BA/%E5%AE%A2%E6%9C%8D%E4%B8%AD%E5%BF%83.png',
					},

				],
			};
		},
		onLoad() {

		},
		methods: {
			//基本功能区调用
			GongneTo(value) {
				if (value === 1) {
					uni.navigateTo({
						url: 'My_dynamic/My_dynamic'
					})
				} else if (value === 2) {
					uni.navigateTo({
						url: 'My_Applyfor/My_Applyfor'
					})
				} else if (value === 3) {
					uni.navigateTo({
						url: 'Order_Receiving/Order_Receiving'
					})
				} else if (value === 4) {
					uni.navigateTo({
						url: 'My_runOrder/My_runOrder'
					})
				} else if (value === 5) {
					uni.navigateTo({
						url: 'My_order/My_order'
					})
				}
			},
			//底部功能分块调用
			BottonTo(val) {
				console.log(val)
				if (val === 3) {
					uni.navigateTo({
						url: './My_wallet/My_wallet'
					})
				}
				if(val===5){
					uni.hideShareMenu()
				}
			},
			Userxx() {

			},
			Auth_rz() {
				console.log("跳转认证界面")
				uni.navigateTo({
					url: './Authentication/Authentication',
				})
			}
		},
		onShareAppMessage(res){
			if(res.from==='button'){
				return{
					title:'1',
					desc:"2",
					imageUrl:'',
					path:'../home/home'
				}
			}
		}
	}
</script>

<style lang="scss">
	.my-userinfo-container {
		height: 100%;
		// 为整个组件的结构添加浅灰色的背景
		background-color: #f4f4f4;

		.top-box {
			height: 250rpx;
			background-color: #FD3E4D;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.avatar {
				display: block;
				width: 70px;
				height: 70px;
				border-radius: 45px;
				border: 2px solid white;
				box-shadow: 0 1px 5px black;
				position: absolute;
				top: 0px;
				left: 20px;
			}

			.nickname {
				color: white;
				font-weight: bold;
				font-size: 16px;
				position: absolute;
				top: 5px;
				left: 110px;
			}

			.nacktyep {
				top: 55px;
				left: 100px;
				font-size: 14px;
				border: 2px solid white;
				width: 100px;
				border-radius: 15px;
				text-align: center;
			}
		}

		.myUn1 {
			position: absolute;
			width: 95%;
			height: 260rpx;
			background-color: #ffffff;
			display: flex;
			border-radius: 15px;
			top: 180rpx;
			left: 20rpx;
		}

		.myUn2 {
			position: absolute;
			border-bottom: 2px solid #1ABC9C;
			width: 95%;
			height: 80rpx;
			left: 20rpx;
		}

		.myUn3 {
			position: absolute;
			top: 14rpx;
			width: 128rpx;
			height: 44rpx;
			display: flex;
			font-family: auto;
			font-weight: 400;
			font-style: normal;
			font-size: 16px;
			color: #000000;
		}

		.myUn4 {
			position: relative;
			width: 140rpx;
			height: 140rpx;
			top: 100rpx;
			left: 12rpx;
		}

		.myUn5 {
			position: absolute;
			left: 34rpx;
			top: 10rpx;
			width: 60rpx;
			height: 60rpx;
		}

		.myUn6 {
			position: absolute;
			font-size: 13px;
			color: #999999;
			top: 80rpx;
			left: 12rpx;
		}

		.myUn7 {
			position: relative;
			width: 95%;
			height: 100rpx;
			background-color: #ffffff;
			top: 240rpx;
			margin-top: 10rpx;
			border-radius: 20px;
			left: 20rpx;
		}

		.myUn8 {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			top: 20rpx;
			left: 20rpx;
		}

		.myUn9 {
			position: absolute;
			top: 30rpx;
			left: 100rpx;
			font-size: 30rpx;
		}

		.myUn10 {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			left: 650rpx;
		}

		.myUn11 {
			position: absolute;
			font-size: 12px;
			width: 140rpx;
			height: 50rpx;
			line-height: 40rpx;
			top: 15rpx;
			left: 480rpx;
			border-radius: 15rpx;
			border: 2px solid white;
			text-align: center;
			color: white;
			font-weight: bold;
		}

		.myUn12 {
			position: absolute;
			color: white;
			font-weight: bold;
			font-size: 16px;
			position: absolute;
			left: 220rpx;
			top: 100rpx;
			font-size: 12px;
		}

		.myUn13 {
			position: absolute;
			color: white;
			font-weight: bold;
			width: 320rpx;
			font-size: 16px;
			left: 0px;
			top: 80rrpx;
			font-size: 12px;
		}

		.myUn14 {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 70rpx;
			left: 680rpx;
		}
	}
</style>
